<template>
	<view class="">
		<!-- #ifdef H5 -->
		<movable-area class="movableArea">
			<movable-view class="movableView" direction="vertical" x="90rpx" :y="y">
				<view class="movableView_pos">
					<view class="movableView_icon textCen textck" @tap="tohomepage" v-if="home">
						<i class="icon textColor size36 textck">&#xe634;</i>
						<text class="size18 textColor textck margin-top10">首页</text>
					</view>
					<view class="movableView_icon textCen textck margin-top20" @tap="toback" v-if="back == 1">
						<i class="icon textColor size36 textck">&#xe620;</i>
						<text class="size18 textColor textck margin-top10">返回</text>
					</view>
					<view class="movableView_icon textCen textck margin-top20" v-if="car" @tap="carTap">
						<text class="jiao textBai size16" v-if="cartNum > 0">{{cartNum}}</text>
						<i class="icon textColor size36 textck">&#xe618;</i>
						<text class="size18 textColor textck margin-top10">购物车</text>
					</view>
					<view class="movableView_icon textCen textck margin-top20" v-if="homeTop" @tap="$emit('top')">
						<i class="icon textColor size36 textck">&#xe61f;</i>
						<text class="size18 textColor textck margin-top10">顶部</text>
					</view>
				</view>
			</movable-view>
		</movable-area>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<movable-area class="movableArea">
			<movable-view class="movableView" direction="vertical" x="90rpx" :y="y">
				<view class="movableView_pos">
					<view class="movableView_icon textCen textck" @tap="tohomepage" v-if="home">
						<i class="icon textColor size36 textck">&#xe634;</i>
						<text class="size18 textColor textck margin-top10">首页</text>
					</view>
					<view class="movableView_icon textCen textck margin-top20" v-if="car" @tap="carTap">
						<text class="jiao textBai size16" v-if="cartNum > 0">{{cartNum}}</text>
						<i class="icon textColor size36 textck">&#xe618;</i>
						<text class="size18 textColor textck margin-top10">购物车</text>
					</view>
					<view class="movableView_icon textCen textck margin-top20" v-if="homeTop" @tap="$emit('top')">
						<i class="icon textColor size36 textck">&#xe61f;</i>
						<text class="size18 textColor textck margin-top10">顶部</text>
					</view>
				</view>
			</movable-view>
		</movable-area>
		<!-- #endif -->
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	props:{
		car:{
			type:Boolean,
			default:false
		},
		home:{
			type:Boolean,
			default:true
		},
		homeTop:{
			type:Boolean,
			default:false
		}
	},
	computed:{
		...mapState({
			cartNum: ({ car }) => car.cartNum
		})
	},
	data() {
		return {
			showflag: false,
			Url:this.Imgurl,
			y:600,
			back:1
		};
	},
	mounted() {
		var that = this;
		uni.getSystemInfo({
			success: function(res) {
				let height = res.windowHeight;
				that.y = height * 0.6;
			}
		})
		this.edit()
	},
	methods: {
		carTap(){
			this.$openPage({
				name:'shopcart'
			})
			// uni.navigateTo({
			// 	url:'/pagesC/shoopingCart/cart'
			// })
		},
		show() {
			this.showflag = !this.showflag;
		},
		tohomepage() {
			this.$openPage({
				name:'index',
				type:'reLaunch'
			})
		},
		edit(item) {
			let pages = getCurrentPages();
			// #ifdef H5
			let currPage = pages[pages.length - 1];
			let prevPage = pages[pages.length - 2]; //上一个页面
			// console.log(prevPage)
			if(prevPage){
				this.back = 1;
			}else{
				this.back = 2;
			}
			// let router = prevPage.route;
			// #endif
			
		},
		toback() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.margin-top10{
		margin-top: 10upx;
	}
	.margin-top20{
		margin-top: 20upx;
	}
.movableArea {
	position: fixed;
	top: 0;
	right:20upx;
	width:120upx;
	height:86%;
	z-index:15;
	pointer-events: none;//设置area元素不可点击，则事件便会下移至页面下层元素
	.movableView {
		pointer-events: auto;//可以点击
		width:90rpx;
		// height: 110rpx;
	}
	.movableView_pos{
		width:90upx;
		background-color: rgba(255,255,255,0.5);
		border-radius:10upx;
		padding:10upx 5upx;
		box-sizing: border-box;
		box-shadow: 0px 0 6px 0px rgba(202, 202, 202, 0.35);
	}
	.movableView_icon{
		position: relative;
		.jiao{
			position: absolute;
			top:-8upx;
			right: 0;
			padding:2upx 15upx;
			border-radius:20upx;
			background-color:$them-page-color;
		}
	}
}
</style>
